<template>
<!--todo:论文检索结果，大概展示为文章列表-->
  <div>
    <div style="width:100vw ;height: 100vh; position:absolute; top: 0; overflow: hidden">
      <img :src="coverAdvance" alt="" style="width: 100vw; z-index: 0">
    </div>
    <navigator-menu></navigator-menu>

    <!-- 高级检索 -->
    <!-- <el-card shadow="always" style="background:#111010; border-radius: 35px 35px 0 0; height: 10vh; margin: 10vw 15vw 0 15vw;">
      <h2 style="line-height: 1vh;text-align:center; color:white;">高级检索</h2>
    </el-card> -->
    <el-card shadow="always" style="border-radius: 35px 35px 35px 35px; margin: 25vh 15vw 1vw 15vw; opacity: 0.95; padding-top: 2vw;">
      <div style="margin-right:30px;" v-for="(cond, index) in conditions" :key="index">
        <!-- <h2 style="float:left;">AEP智搜</h2> -->
        <!-- 删除搜索项 -->
        <el-tooltip
          v-if="cond.option"
          effect="dark"
          content="删除行"
          style="float:left; width:2vw;"
        >
          <i class="el-icon-remove-outline" style="text-align:center;" @click="deleteRow(cond)"></i>
        </el-tooltip>
        <!-- 与或非运算 -->
        <el-select v-if="cond.option" v-model="cond.option"  style="float:left; height:7vh; width:93px;" size="200">
          <el-option
            v-for="(oprater, index) in opraterOptions"
            :key="index"
            :label="oprater"
            :value="oprater"
          >
          </el-option>
        </el-select>
        <!-- 检索条件 -->
        <el-select v-if="cond.option" v-model="cond.key"  style="float:left; height:7vh; width:11vw; margin-left:10px;" size="200">
          <el-option
            v-for="(option, index) in searchOptions"
            :key="index"
            :label="option"
            :value="option"
          >
          </el-option>
        </el-select>
        <el-select v-else v-model="cond.key"  style="float:left; height:7vh; width:17vw; margin-left:2vw;" size="200">
          <el-option
            v-for="(option, index) in searchOptions"
            :key="index"
            :label="option"
            :value="option"
          >
          </el-option>
        </el-select>
        <!-- 检索输入搜索框 -->
        <el-input
          v-model="cond.value"
          v-if="cond.key=='标题'"
          placeholder="示例：模拟退火"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='作者'"
          placeholder="示例：闫群民"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='领域'"
          placeholder="示例：软件工程"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='ISBN'"
          placeholder="示例：****-****-***"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='DOI'"
          placeholder="示例：10.19665/j.issn1001-2400.2021.04.016"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='摘要'"
          placeholder="示例：为了提高粒子群算法的寻优速度和精度"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='关键词'"
          placeholder="示例：算法"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <el-input
          v-model="cond.value"
          v-else-if="cond.key=='机构'"
          placeholder="示例：北京航空航天大学"
          style="float:left; height:8vh; width: 40vw; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
        />
        <!-- 模糊/精确 -->
        <el-select v-model="cond.isBlur" placeholder="Select" style="float:left; width:6vw; height:8vh;">
          <el-option
            v-for="(option,index) in blurOptions"
            :key="index"
            :label="option"
            :value="option"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 日期范围 -->
      <div>
        <el-tooltip
          v-if="dateRange.option"
          effect="dark"
          content="删除日期范围"
          style="float:left; width:2vw;"
        >
          <i class="el-icon-remove-outline" style="text-align:center;" @click="deleteDateRange"></i>
        </el-tooltip>
        <el-select v-if="dateRange.option && dateRange.option!='自定义年份范围'" v-model="dateRange.option"  style="float:left; height:7vh; width:17vw; margin:10px 45vw 1vw 0;" size="200">
          <el-option
            v-for="(option, index) in dateRangeOptions"
            :key="index"
            :label="option"
            :value="option"
          >
          </el-option>
        </el-select>
        <el-select v-else-if="dateRange.option=='自定义年份范围'" v-model="dateRange.option"  style="float:left; height:7vh; width:17vw; margin:10px 0 1vw 0;" size="200">
          <el-option
            v-for="(option, index) in dateRangeOptions"
            :key="index"
            :label="option"
            :value="option"
          >
          </el-option>
        </el-select>
        <div v-if="dateRange.option=='自定义年份范围'">
          <el-input
            v-model="dateRange.beginYear"
            placeholder="例：2000"
            style="float:left; height:8vh; width: 21vw; margin:10px 0 1vw 15px;"
            input-style="height: 7vh;border-radius: 5px;"
            clearable
          />
          <span style="line-height: 7vh;float:left; height:7vh; text-align:center; margin:10px 0 1vw 24px;">至</span>
          <el-input
            v-model="dateRange.endYear"
            placeholder="例：2010"
            style="float:left; height:8vh; width: 21vw; margin:10px 0 1vw 24px;"
            input-style="height: 7vh;border-radius: 5px;"
            clearable
          />
        </div>
      </div>
      <!-- 添加行 -->
      <el-button round style="float:left; margin:1vw 0 3vh 2vw;" @click="addRow">+添加行</el-button>
      <!-- 添加日期范围 -->
      <el-button round v-if="!dateRange.option" style="float:left; margin:1vw 0 3vh 2vw;" @click="addDateRange">+添加日期范围</el-button>
      <!-- 检索 -->
      <el-button type="primary" style="float:right;margin:30px; 20px 30px 0;" @click="advancedSearch">检索</el-button>
    </el-card>
  </div>


</template>

<script>
import { ref } from '@vue/reactivity';
import axios from 'axios'
import router from "../router";
import NavigatorMenu from "../components/NavigatorMenu";

export default {
  name: "advanceSearch",
  components: {
    NavigatorMenu,
    axios
  },
  data() {
    return {
      searchOptions: ['标题','作者','领域','ISBN','DOI','摘要','关键词','机构'],
      opraterOptions: ['AND','OR','NOT'],
      dateRangeOptions: ['所有年份','最近五年','本年迄今','自定义年份范围'],
      blurOptions: ['模糊','精确'],
      conditions: [{
        key: '标题',
        option: 0,
        page: 1,
        size: 20,
        value: '',
        isBlur: '模糊',
      }],
      transConditions: [],
      transYear: {
        l: '',
        r: '',
      },
      dateRange: {
        option: '',
        beginYear: '',
        endYear: '',
      },
      coverAdvance: require('../assets/images/macro1.jpg'),
    }
  },
  created() {
    if(this.$route.params.fromSearchResult){
      console.log('params')
      console.log(this.$route.params)
      const source = JSON.parse(this.$route.params.conditions)
      var isBlur
      var key
      var option
      console.log('source')
      console.log(source)
      this.conditions = []
      for(let i=0; i<source.length; i++){
        switch(source[i].key){
          case 'authors.name':
            key = '作者'
            isBlur = '模糊'
            break
          case 'authors.name.keyword':
            key = '作者'
            isBlur = '精确'
            break
          case 'doi':
            key = 'DOI'
            isBlur = '模糊'
            break
          case 'doi.keyword':
            key = 'DOI'
            isBlur = '精确'
            break
          case 'field':
            key = '领域'
            isBlur = '模糊'
            break
          case 'field.keyword':
            key = '领域'
            isBlur = '精确'
            break
          case 'title':
            key = '标题'
            isBlur = '模糊'
            break
          case 'title.keyword':
            key = '标题'
            isBlur = '精确'
            break
          case 'isbn':
            key = 'ISBN'
            isBlur = '模糊'
            break
          case 'isbn.keyword':
            key = 'ISBN'
            isBlur = '精确'
            break
          case 'keywords':
            key = '关键词'
            isBlur = '模糊'
            break
          case 'keywords.keyword':
            key = '关键词'
            isBlur = '精确'
            break
          case 'venue.id':
            key = '期刊'
            isBlur = '模糊'
            break
          case 'venue.id.keyword':
            key = '期刊'
            isBlur = '精确'
            break
          case 'authors.org':
            key = '机构'
            isBlur = '模糊'
            break
          case 'authors.org.keyword':
            key = '机构'
            isBlur = '精确'
            break
          default:
            key = '标题'
            isBlur = '模糊'
            break
        }
        switch(source[i].option){
          case 0:
            option='AND'
            break
          case 1:
            option='OR'
            break
          case 2:
            option='OR'
            break
          default:
            break
        }
        this.conditions.push({
          key: key,
          option: option,
          page: source[i].page,
          size: 20,
          value: source[i].value,
          isBlur: isBlur,
        })
      }
      console.log('createdAS')
      console.log(this.conditions)
      this.conditions[0].option = 0
    }
  },
  methods :{
    deleteRow(item) {
      const index = this.conditions.indexOf(item)
      if (index !== -1) {
        this.conditions.splice(index, 1)
      }
    },
    deleteDateRange() {
      this.dateRange.option = '';
      this.dateRange.beginYear = '';
      this.dateRange.endYear = '';
    },
    addRow() {
      this.conditions.push({
        key: '标题',
        option: 'AND',
        // option: 0,
        page: 1,
        size: 20,
        value: '',
        isBlur: '模糊',
      })
    },
    addDateRange() {
      this.dateRange.option = '所有年份';
      this.dateRange.beginYear = '';
      this.dateRange.endYear = '';
    },
    handleSearch (){
      let Parameters = this.conditions
      let key
      let option
      let l
      let r
      for(let i=0; i<Parameters.length; i++){
        switch (Parameters[i].option){
          case 'AND': option=0; break
          case 'OR': option=1; break
          case 'NOT': option=2; break
          default: option=0; break
        }
        switch (Parameters[i].key){
          case '摘要': key='abstract';break
          case '作者': key='authors.name';break
          case 'DOI': key='doi';break
          case '领域': key='field';break
          case '标题': key='title';break
          case 'ISBN': key='isbn';break
          case '关键词': key='keywords';break
          case '机构': key='authors.org';break
          default: key='';break
        }
        if(Parameters[i].isBlur=='精确'){
          key=key+".keyword"
        }
        this.transConditions.push({
          key: key,
          option: option,
          page: Parameters[i].page,
          size: Parameters[i].size,
          value: Parameters[i].value,
        })
      }
      switch (this.dateRange.option){
        case '所有年份':
          l=1950
          r=2021
          break
        case '最近五年':
          l=2017
          r=2021
          break
        case '本年迄今':
          l=2021
          r=2021
          break
        case '自定义年份范围':
          l=this.dateRange.beginYear
          r=this.dateRange.endYear
          break
        default:
          l=1950
          r=2021
          break
      }
      this.transYear.l=l
      this.transYear.r=r
    },
    advancedSearch() {
      this.handleSearch()
      const Parameters = {
        conditions: this.transConditions,
        paperFilter:{
          canGet: false,
          highSite: false,
          hot: false,
        },
        sort:1,
        year:{
          l:this.transYear.l,
          r:this.transYear.r,
        }
      }
      router.push(
      {
        path: '/searchResult',
        name: 'SearchResult',
        params: {
          fromAdvanced: true,
          Parameters: JSON.stringify(Parameters)
        }
      })
      console.log('Parameters')
      console.log(Parameters)
    }
  }
}
</script>

<style scoped>

</style>
